<script setup>
import { ref } from 'vue'

const props = defineProps({
  content: {
    type: String,
    default: ''
  },
  fileName: {
    type: String,
    default: ''
  },
  showViewBtn: {
    type: Boolean,
    default: false
  }
})
const qrcodeCanvasRef = ref();
const canvasFaRef = ref()
const dowloadChange = async (name) => {
  const cvs = canvasFaRef.value.querySelector('canvas')
  const ctx = cvs.getContext('2d')
  ctx.fillStyle = "#ffffff";
  ctx.globalCompositeOperation = "destination-over"; // 设置绘制模式为半透明叠加
  ctx.fillRect(0, 0, cvs.width, cvs.height);
  ctx.scale(3, 3)
  const url = await qrcodeCanvasRef.value.toDataURL('image/png');
  const a = document.createElement('a');
  a.download = name + '.png';
  a.href = url;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};
const pageKey = ref(1)
const mouseenter = () => {
  pageKey.value++
}
</script>

<template>
  <a-popover :overlay-inner-style="{ padding: 0 }" placement="left">
    <template #content>
      <div style="padding: 10px;" ref="canvasFaRef">
        <a-qrcode ref="qrcodeCanvasRef" :value="props.content" :size="300" :bordered="false" />
        <AButton type="primary" style="width: 100%;" @click="dowloadChange(props.fileName)">下载</AButton>
      </div>
    </template>
    <span style="color: #09c690;margin-right: 30px;">查看二维码</span>
  </a-popover>
  <a-popover :overlay-inner-style="{ padding: 0 }" placement="leftTop" v-if="showViewBtn">
    <template #content>
      <div style="width: 400px;height: 800px;" :key="pageKey">
        <iframe :src="props.content" frameborder="0" width="400" height="800"></iframe>
      </div>
    </template>
    <span style="color: #09c690;" @mouseenter="mouseenter">预览</span>
  </a-popover>
</template>